<template>
  <div id="app">

    <nav v-show="show">
      <router-link to="/" exact>
        <div class="icon">
          <span class="iconfont icon-shouye"></span>
          <span>首页</span>
        </div>
      </router-link>
      <router-link to="/service">
        <div class="icon">
          <span class=" iconfont icon-fuwu"></span>
          <span>服务</span>
        </div>
      </router-link>
      <router-link to="/news">
        <div class="icon">
          <span class="iconfont icon-xinwen_o"></span>
          <span>新闻</span>
        </div>
      </router-link>
      <router-link to="/mine">
        <div class="icon">
          <span class="iconfont icon-gerenzhongxin"></span>
          <span>个人中心</span>
        </div>
      </router-link>
    </nav>

    <router-view />
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {

    }
  },
  computed: {
    ...mapState(["show"]),
  },
  methods: {
    ...mapMutations(["setToken", "setAddress"]),
  },
  created() {
    let token = localStorage.getItem("token");
    let address = localStorage.getItem("address");
    this.setToken(token);
    this.setAddress(JSON.parse(address))
    // console.log(address);
  }

}

</script>

<style>
* {
  padding: 0;
  margin: 0;
  font-size: 14px;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
}

#app {
  height: 100%;
}

.header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  font-size: 20px;
  background-color: #5BA2FE;
}

a {
  color: #000;
  text-decoration: none;
}

nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  padding-top: 10px;
  justify-content: space-around;
  background-color: #fff;
  z-index: 999;
}

.icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.router-link-active {
  color: #ff464e;
}
</style>
